<template>
  <div class="beauty">
    <van-tabs @click="onClick">
      <van-tab title="广场" color="#fff">
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <p class="dongtai">我发布了动态</p>
        <van-row gutter="21">
          <van-col span="7"
            ><img
              src="https://img2.baidu.com/it/u=3093354217,1353711936&fm=253&fmt=auto&app=138&f=JPEG?w=442&h=500"
              alt=""
              width="100%"
          /></van-col>
          <van-col span="7"
            ><img
              src="https://img2.baidu.com/it/u=3093354217,1353711936&fm=253&fmt=auto&app=138&f=JPEG?w=442&h=500"
              alt=""
              width="100%"
          /></van-col>
          <van-col span="7"
            ><img
              src="https://img2.baidu.com/it/u=3093354217,1353711936&fm=253&fmt=auto&app=138&f=JPEG?w=442&h=500"
              alt=""
              width="100%"
          /></van-col>
        </van-row>
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>赞(10000)</span>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <p class="dongtai">我发布了视频</p>
        <img
          src="
         https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cuplayer.com%2FCu%2FPic%2FVcastr2.jpg&refer=http%3A%2F%2Fwww.cuplayer.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662777677&t=eb3ee716d4aa2ef8a623827c4b0707e7"
          alt=""
          width="100%"
        />
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <p class="dongtai">我发布了短文</p>
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <p class="dongtai">我发布了图文</p>
        <dl class="tuwen">
          <dt>
            <img
              src="https://img2.baidu.com/it/u=4051329593,2809202808&fm=253&fmt=auto&app=138&f=JPEG?w=132&h=132"
              alt=""
            />
            <article>
              <p><b>女人30岁的皮肤管理怎么做?</b></p>
              <p>十个皮肤保养小技巧请查收!</p>
              <aside>
                <span>张青博士</span>
                <span>2019-09-19</span>
                <span>51阅读</span>
              </aside>
            </article>
          </dt>
        </dl>
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <img
          src="
         https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.meituan.net%2Fdpmerchantpic%2Fdc5b47ec460111af78f7a608c0eccae02472383.jpg&refer=http%3A%2F%2Fp0.meituan.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662778683&t=716fced487373f76e4ec6490e5822b2e"
          alt=""
          width="100%"
        />
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <img
          src="
         https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic193.nipic.com%2Ffile%2F20181127%2F3506043_225259343033_2.jpg&refer=http%3A%2F%2Fpic193.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662778683&t=4e523c3871c33a1c555ca722c75a13bb"
          alt=""
          width="100%"
        />
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <p class="dongtai">我回答了问题</p>
        <ul>
          <p>青春逗到底该怎么治</p>
        </ul>
      </van-tab>
      <van-tab title="关注">
        <ol>
          <van-row>
            <van-col span="6"
              ><img
                src="https://img2.baidu.com/it/u=929754970,4067951056&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500"
                alt=""
            /></van-col>
            <van-col span="6"
              ><li>
                <p>windir</p>
                <p>成都</p>
              </li></van-col
            >
            <van-col span="6"
              ><li>
                <p>关注</p>
                <p>8</p>
              </li></van-col
            >
            <van-col span="6"
              ><li>
                <p>粉丝</p>
                <p>100</p>
              </li>
            </van-col>
          </van-row>
        </ol>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <p class="dongtai">我发布了动态</p>
        <van-row gutter="21">
          <van-col span="7"
            ><img
              src="https://img2.baidu.com/it/u=3093354217,1353711936&fm=253&fmt=auto&app=138&f=JPEG?w=442&h=500"
              alt=""
              width="100%"
          /></van-col>
          <van-col span="7"
            ><img
              src="https://img2.baidu.com/it/u=3093354217,1353711936&fm=253&fmt=auto&app=138&f=JPEG?w=442&h=500"
              alt=""
              width="100%"
          /></van-col>
          <van-col span="7"
            ><img
              src="https://img2.baidu.com/it/u=3093354217,1353711936&fm=253&fmt=auto&app=138&f=JPEG?w=442&h=500"
              alt=""
              width="100%"
          /></van-col>
        </van-row>
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>赞(10000)</span>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <p class="dongtai">我发布了视频</p>
        <img
          src="
         https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cuplayer.com%2FCu%2FPic%2FVcastr2.jpg&refer=http%3A%2F%2Fwww.cuplayer.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662777677&t=eb3ee716d4aa2ef8a623827c4b0707e7"
          alt=""
          width="100%"
        />
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <p class="dongtai">我发布了短文</p>
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <p class="dongtai">我发布了图文</p>
        <dl class="tuwen">
          <dt>
            <img
              src="https://img2.baidu.com/it/u=4051329593,2809202808&fm=253&fmt=auto&app=138&f=JPEG?w=132&h=132"
              alt=""
            />
            <article>
              <p><b>女人30岁的皮肤管理怎么做?</b></p>
              <p>十个皮肤保养小技巧请查收!</p>
              <aside>
                <span>张青博士</span>
                <span>2019-09-19</span>
                <span>51阅读</span>
              </aside>
            </article>
          </dt>
        </dl>
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <img
          src="
         https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.meituan.net%2Fdpmerchantpic%2Fdc5b47ec460111af78f7a608c0eccae02472383.jpg&refer=http%3A%2F%2Fp0.meituan.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662778683&t=716fced487373f76e4ec6490e5822b2e"
          alt=""
          width="100%"
        />
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <img
          src="
         https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic193.nipic.com%2Ffile%2F20181127%2F3506043_225259343033_2.jpg&refer=http%3A%2F%2Fpic193.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662778683&t=4e523c3871c33a1c555ca722c75a13bb"
          alt=""
          width="100%"
        />
        <p class="shuoshuo">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的
        </p>
        <dl class="zan">
          <span>一周前</span>
          <dd>
            <span>评论(1000)</span>
            <span>转发(100)</span>
          </dd>
        </dl>
        <figure>
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA?pid=ImgDet&rs=1"
            alt=""
          />
          <figcaption>
            <p><span>Windir</span> <i>LV47</i> <a>医美新秀</a></p>
            <p>深圳</p>
          </figcaption>
        </figure>
        <p class="dongtai">我回答了问题</p>
        <ul>
          <p>青春逗到底该怎么治</p>
        </ul>
      </van-tab>
      <p></p>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, Toast, Col, Row } from "vant";

Vue.use(Col);
Vue.use(Row);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      show: false,
    };
  },
  computed: {},
  watch: {},

  methods: {
    onClick(name, title) {
      Toast(title);
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.beauty {
  width: 94%;
  padding: 3%;
}
figure {
  width: 100%;
  height: 50px;
  display: flex;
}
figure img {
  width: 50px;
  height: 50px;
  display: block;
  margin-right: 3%;
}
figcaption {
  font-size: 14px;
  flex: 1;
}
figcaption p {
  text-align: start;
  line-height: 24px;
}
figcaption span,
figcaption i {
  margin-right: 3%;
}
figcaption i {
  color: red;
  text-decoration: none;
}
figcaption a {
  color: blue;
}
.dongtai {
  text-align: start;
  font-size: 14px;
  margin: 10px 0;
}
.shuoshuo {
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  text-align: start;
  padding: 5px 0;
}
.zan {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.zan span {
  margin: 0 10px;
  font-size: 12px;
}
.zan dd {
  display: flex;
  justify-content: end;
}
.tuwen {
  width: 95%;
  margin-left: 2.5%;
}
.tuwen dt {
  display: flex;
  width: 95%;
  background: #eee;
  padding: 2.5%;
}
.tuwen dt img {
  width: 25%;
  margin-right: 2.5%;
}
article p {
  font-size: 14px;
}
aside {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.tuwen dd {
  display: flex;
  justify-content: end;
  margin: 10px 0;
}
.tuwen dd span {
  display: block;
  margin-right: 10px;
  font-size: 12px;
}
ul {
  width: 100%;
  height: 60px;
  margin: 15px 0 100px;
  background: #ddd;
}
ul P {
  text-indent: 20px;
  line-height: 60px;
  font-size: 22px;
}
ol img {
  width: 60px;
  height: 60px;
}
ol li {
  margin-top: 22px;
}
ol {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}
</style>
